<template>
  <div class="report-wrapper">
    <div id="printArea">
      <div
        v-for="(pitem, pindex) in tableDatas"
        :key="pindex"
        class="printContainer"
      >
        <el-row>
          <el-col
            :span="24"
            style="
              position: relative;
              display: flex;
              flex-direction: column;
              font-size: 20px;
              text-align: center;
            "
          >
            <span style="padding: 4px 0">中国人民解放军总医院第一医学中心</span>
            <b style="padding: 4px 0">输血科交叉配血检验报告单</b>
            <span style="position: absolute; right: 0; font-size: 12px">
              DBT301-TR-BB-98
            </span>
            <div class="code">
              <vue-barcode
                v-if="bloodApply"
                :display-value="false"
                :height="40"
                :value="bloodApply.apply_num"
                :width="1.2"
              >
                条码信息加载失败
              </vue-barcode>
            </div>
          </el-col>
        </el-row>
        <div class="h12"></div>
        <div class="row" style="display: flex; margin: 12px 0; font-size: 14px">
          <span>
            编号：
            <b>{{ bloodMatch.MATCH_SHEET_NUM }}</b>
          </span>
          <span style="margin-left: auto">
            申请单号：
            <b>{{ bloodMatch.APPLY_NUM }}</b>
          </span>
        </div>
        <el-row style="padding: 4px 0">
          <el-col :span="6">
            <span>
              科别：
              <span class="underline">{{ bloodMatch.DEPT_NAME }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              受血者：
              <span class="underline">{{ bloodMatch.PAT_NAME }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              血型/Rh(D)：
              <span class="underline">
                {{ getAboValue(bloodMatch.PAT_BLOOD_GROUP) }}/{{
                  getRhValue(bloodMatch.RH)
                }}
              </span>
            </span>
          </el-col>
        </el-row>
        <el-row style="padding: 4px 0">
          <el-col :span="6">
            <span>
              ID号：
              <span class="underline">{{ bloodMatch.PATIENT_ID }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              住院号：
              <span class="underline">{{ bloodMatch.INP_NO }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              性别：
              <span class="underline">{{ bloodMatch.PAT_SEX }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              日期：
              <span class="underline">
                {{ substr(bloodMatch.BIRTHDAY, 0, 10) }}
              </span>
            </span>
          </el-col>
        </el-row>
        <el-row style="padding: 4px 0">
          <el-col :span="12">
            <span>
              诊断：
              <span class="underline">{{ bloodMatch.BLOOD_DIAGNOSE }}</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              样本类型：
              <span class="underline">静脉血</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              采集时间：
              <span class="underline">
                {{ substr(bloodMatch.GATHER_DATE, 0, 10) }}
              </span>
            </span>
          </el-col>
        </el-row>
        <div class="h12"></div>
        <div class="table">
          <table>
            <thead>
              <tr>
                <td align="center" rowspan="2">
                  血袋号
                  <br />
                  配血试管
                </td>
                <td align="center" rowspan="2">
                  血型
                  <br />
                  Rh(D)
                </td>
                <td align="center" rowspan="2">
                  献血者
                  <br />
                  血员号
                </td>
                <td align="center" rowspan="2">标本位置</td>
                <td align="center" rowspan="2">血量(U)</td>
                <td align="center" rowspan="2">血液成分</td>
                <td align="center" rowspan="2">配血方式</td>
                <td align="center" colspan="3">配血结果</td>
                <td align="center" rowspan="2" width="50">终配血结果</td>
                <td align="center" rowspan="2">配血者</td>
              </tr>
              <tr>
                <td align="center">主侧</td>
                <td align="center">次侧</td>
                <td align="center" width="50">结果</td>
              </tr>
            </thead>
            <tbody>
              <template v-for="(item, index) in pitem">
                <tr :key="index">
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.BLOOD_ID }}
                    <br />
                    {{ item.BLOOD_ID_UP }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ getAboValue(item.BLOOD_GROUP) }}
                    <br />
                    {{ getRhValue(item.RH) }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.NAME }}
                    <br />
                    {{ item.BLOOD_DONOR_ID }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.SPECIMEN_POSITION }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.BLOOD_CAPACITY }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.BLOOD_TYPE_NAME }}
                  </td>
                  <td align="center">
                    {{
                      getBloodMatchType(
                        bloodMatchTypes[0],
                        'blood_match_type_name'
                      )
                    }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(bloodMatchTypes[0], 'FIRST_RESULT') }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(bloodMatchTypes[0], 'SECOND_RESULT') }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(bloodMatchTypes[0], 'MATCH_RESULT') }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.MATCH_RESULT }}
                  </td>
                  <td
                    align="center"
                    :rowspan="bloodMatchTypes && bloodMatchTypes.length"
                  >
                    {{ item.MATCH_OPERATOR }}
                  </td>
                </tr>
                <tr
                  v-for="(citem, cindex) in bloodMatchTypes.slice(1)"
                  :key="index + '-' + cindex"
                >
                  <td align="center">
                    {{ getBloodMatchType(citem, 'blood_match_type_name') }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(citem, 'FIRST_RESULT') }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(citem, 'SECOND_RESULT') }}
                  </td>
                  <td align="center">
                    {{ getBloodMatchType(citem, 'MATCH_RESULT') }}
                  </td>
                </tr>
              </template>
              <template v-if="pitem.length < 5">
                <tr v-for="i in 5 - pitem.length" :key="`record${i}`">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
        <div class="h12"></div>
        <el-row style="margin-top: 8px">
          <el-col :span="4">输出者：{{ username }}</el-col>
          <el-col :span="4">复核者：</el-col>
          <el-col :span="8">打印日期：{{ time }}</el-col>
          <el-col :span="8">配血日期：{{ bloodMatch.MATCH_DATE }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="h24" />
    <el-button v-print="print" icon="el-icon-printer" type="primary">
      打印
    </el-button>
  </div>
</template>

<script>
  import { getCurrentTime } from '@/utils'
  import { mapGetters } from 'vuex'
  import VueBarcode from 'vue-barcode'
  export default {
    components: {
      VueBarcode,
    },
    props: {
      bloodMatch: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        user: this.$store.getters.name,
        time: getCurrentTime(),
        print: {
          id: 'printArea',
          popTitle: '中国人民解放军总医院第一医学中心',
          extraHead: '',
          preview: false,
          previewTitle: '',
          previewPrintBtnLabel: '预览结束，开始打印',
          zIndex: 20002,
          previewBeforeOpenCallback: () => {
            console.log(this.msg, this)
          },
          previewOpenCallback() {
            console.log('已经加载完预览窗口，预览打开了！')
          },
          beforeOpenCallback() {
            console.log('开始打印之前！')
          },
          openCallback() {
            console.log('执行打印了！')
          },
          closeCallback() {
            console.log('关闭了打印工具！')
          },
          clickMounted() {
            console.log('点击v-print绑定的按钮了！')
          },
          standard: '',
          extraCss: '',
        },
      }
    },
    computed: {
      ...mapGetters({
        username: 'user/username',
      }),
      tableDatas() {
        let res = this.bloodMatch.BLOODS || [this.bloodMatch]
        const tableData = res.map((val) => {
          if (!val.blood_match_types) {
            val.blood_match_types = [{}, {}]
          }
          if (val.blood_match_types.length === 0) {
            val.blood_match_types = [
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
              {
                FIRST_RESULT: '',
                SECOND_RESULT: '',
                blood_match_type_name: '',
                MATCH_RESULT: '',
                DAT: '',
              },
            ]
          }
          return val
        })
        if (tableData.length > 5) {
          return [tableData.slice(0, 5), tableData.slice(5, 10)]
        }
        return [tableData]
      },
      bloodMatchTypes() {
        let res = (this.bloodMatch && this.bloodMatch.blood_match_types) || []
        if (res.length === 0) {
          res = [{}]
        }
        return res
      },
    },
    methods: {
      getAboValue(value) {
        if (value) {
          return value + '型'
        }
        return ''
      },
      getRhValue(value) {
        if (value) {
          return { '+': '阳性', '-': '阴性' }[value] || ''
        }
        return ''
      },
      substr(str, start, len) {
        if (str) {
          return str.substr(start, len)
        }
        return ''
      },
      getBloodMatchType(item, namekey) {
        const blood_match_types = this.bloodMatchTypes
        if (blood_match_types.length > 0) {
          const blood_match_type = item
          let value = blood_match_type[namekey] || ''
          if (['FIRST_RESULT', 'SECOND_RESULT'].includes(namekey)) {
            value = (value && value.join(',')) || ''
          }
          if (namekey === 'MATCH_RESULT') {
            value = item['MATCH_RESULT'] || ''
          }
          return value
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped>
  .report-wrapper {
    padding: 12px;
    font-family: Microsoft YaHei !important;
    font-size: 12px;
    color: #000 !important;
    span {
      &.underline {
        padding-bottom: 1px;
        margin-left: 4px;
        border-bottom: grey 1px solid;
      }
    }
  }
  #printArea {
    margin: 0 12px;
    color: #000 !important;
    .printContainer:first-child {
      padding-bottom: 20px;
      border-bottom: 1px dashed #999;
    }
    .printContainer:last-child {
      padding-top: 20px;
    }
  }
  table {
    width: 70%;
    border-collapse: collapse; /* 取消表格边框 */
    border-top: 1px solid #333;
  }
  table,
  th,
  tr,
  td {
    border-bottom: 1px solid #333; /* 表格横线 */
  }

  .table {
    * {
      // font-family: '宋体';
      font-size: 12px;
      line-height: 18px;
      color: #000;
    }

    table {
      width: 100%;
      border-collapse: collapse;

      td,
      th {
        height: 30px;
        vertical-align: center;
      }
    }
    .empty {
      line-height: 60px;
      text-align: center;
      border: 1px solid #000;
      border-top: none;
    }
    input {
      width: 100%;
      height: 30px;

      font-size: 14px;
      line-height: 14px;

      border: none;
      border-bottom: 1px solid #000000;

      &:focus {
        outline: 1px solid #999999;
      }
    }

    .table {
      th {
        font-size: 15px;
      }
    }

    .foot {
      padding-top: 20px;
    }
  }
  img,
  .code {
    position: absolute;
    top: 15px;
    right: 0;
    span {
      display: inline-block;
      width: 200px;
      text-align: center;
    }
  }
</style>
